import React, { Suspense } from 'react'
import { Route, Switch } from 'react-router-dom'
import { Spin } from 'antd';
import menus from './menus'

// 提取出来的路由组件
function RouterView() {
    const renderRoute = (menus) => {
      return menus.map(item => {
        if (item.Children) {
          return renderRoute(item.Children)
        } else {
          return <Route
            path={ item.path }
            key={item.path}
            exact
            component = { item.component } />
          }
      })
    }
    return (
      
        <Suspense fallback={<div className="loading"><Spin size="large" /></div>}>

        <Switch>
          {
            renderRoute(menus)
          }
    
        </Switch>
      </Suspense>
    )
}

export default RouterView
